<!DOCTYPE html>
<html>
<head>
	<title>SoundJS: Sound Grid</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
	<style>
		body {
			font-family: sans-serif;
			font-size: 11px;
		}

		#content {
			width: 1000px;
		}

		.gridBox {
			float: left;
			background-repeat: no-repeat;
			background-position: 0 0px;
			background-color: #222;
			background-size: 320px 300px;
			border: 0px solid #666;
			width: 320px;
			height: 100px;
		}

		.gridBox:hover {
			background-position: 0 -100px;
			background-color: #322;
			cursor: pointer;
		}

		.gridBox.active, .gridbox.active:hover {
			background-position: 0 -200px;
			cursor: auto;
		}
	</style>

</head>

<body onload="init();">

<header class="SoundJS">
	<h1>Sound Grid</h1>

	<p>Click audio instances in the grid to play them.</p>
</header>

<!-- We'll use the ID of the div to determine which audio file to play.
These id's match the ones passed into the audioList array. -->
<div id="content">
	<div id="1" onclick="playSound(this)" class="gridBox"></div>
	<div id="2" onclick="playSound(this)" class="gridBox"></div>
	<div id="3" onclick="playSound(this)" class="gridBox"></div>
	<div id="4" onclick="playSound(this)" class="gridBox"></div>
	<div id="5" onclick="playSound(this)" class="gridBox"></div>
	<div id="6" onclick="playSound(this)" class="gridBox"></div>
	<div id="7" onclick="playSound(this)" class="gridBox"></div>
	<div id="8" onclick="playSound(this)" class="gridBox"></div>
	<div id="9" onclick="playSound(this)" class="gridBox"></div>
	<div id="10" onclick="playSound(this)" class="gridBox"></div>
	<div id="11" onclick="playSound(this)" class="gridBox"></div>
	<div id="12" onclick="playSound(this)" class="gridBox"></div>
</div>

<div id="error">
	<h2>Sorry!</h2>

	<p>SoundJS is not currently supported in your browser.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the device and browser you are using. Thank you.</p>
</div>

<script type="text/javascript" src="../lib/soundjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
	http://code.createjs.com -->

<script id="editable">
	var preload;

	function init() {
		if (!createjs.Sound.initializeDefaultPlugins()) {
			document.getElementById("error").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		//examples.showDistractor("content");
		var assetsPath = "../_assets/audio/";
		var sounds = [
			{src: "Game-Break.ogg", id: 1},
			{src: "Game-Spawn.ogg", id: 2},
			{src: "Game-Shot.ogg", id: 3},

			{src: "GU-StealDaisy.ogg", id: 4},
			{src: "Humm.ogg", id: 5},
			{src: "R-Damage.ogg", id: 6},

			{src: "Thunder1.ogg", id: 7},
			{src: "S-Damage.ogg", id: 8},
			{src: "U-CabinBoy3.ogg", id: 9},

			{src: "ToneWobble.ogg", id: 10},
			{src: "Game-Death.ogg", id: 11},
			{src: "Game-Break.ogg", id: 12}  //OJR would prefer a new sound rather than a copy
		];

		createjs.Sound.alternateExtensions = ["mp3"];	// add other extensions to try loading if the src file extension is not supported
		createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this)); // add an event listener for when load is completed
		createjs.Sound.registerSounds(sounds, assetsPath);
	}

	function soundLoaded(event) {
		//examples.hideDistractor();
		var div = document.getElementById(event.id);
		div.style.backgroundImage = "url('../_assets/art/audioButtonSheet.png')";
	}

	function stop() {
		if (preload != null) {
			preload.close();
		}
		createjs.Sound.stop();
	}

	function playSound(target) {
		//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
		var instance = createjs.Sound.play(target.id);
		if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) {
			return;
		}
		target.className = "gridBox active";
		instance.addEventListener("complete", function (instance) {
			target.className = "gridBox";
		});
	}
</script>

</body>
</html>
